<template>
  <div id="FaultDispatch" class="wrap">
    <!--查询表单-->
    <el-form label-position="left" size="mini" :inline="true" :model="queryForm" label-width='90px' class="query-form">
        <el-form-item label="联系人姓名">
            <el-input v-model="queryForm.lxrxm" clearable placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getData(1)">查询</el-button>
            <el-button type="primary" @click="clearQuery">清空</el-button>
        </el-form-item>
        <el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;<a class="text-base" @click='query_show = !query_show; '>更多查询条件<i :class="'iconfont icon-'+query_show"></i></a>
        </el-form-item>
        <div v-show="query_show">
            <div class="input-box">
                <el-form-item label="联系人电话">
                    <el-input v-model="queryForm.lxrdh" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="queryForm.state" clearable placeholder="请选择">
                    <el-option value="未处理" label="未处理"></el-option>
                    <el-option value="已派单" label="已派单"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="queryForm.createTime"
                        type="daterange"
                        style="width: 250px; margin-right: 30px;"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </el-form-item>
            </div>
        </div>
    </el-form>

    <!--客户表格数据展示-->
    <el-table class="table" ref="table" :data="tableData" border style="width: 100%;" @sort-change="sortChange" :header-cell-style="{padding: 0,height: '34px'}">
      <el-table-column prop="lxrxm" sortable="custom" label="联系人姓名"></el-table-column>
      <el-table-column prop="lxrdh" sortable="custom" label="联系人电话"></el-table-column>
      <el-table-column prop="khdz" width="150px" sortable label="客户地址"></el-table-column>
      <el-table-column prop="remark" sortable="custom" label="备注" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="createTime" sortable="custom" label="创建时间"></el-table-column>
      <el-table-column prop="state" sortable="custom" label="状态"></el-table-column>
      <el-table-column sortable="custom" label="操作" width="160px" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span @click="clickAdd(scope.row)" v-if="scope.row.state == '未处理'" style="padding: 4px 6px;color: #409EFF; cursor: pointer;">转化为安装单</span>
        </template>
      </el-table-column>
    </el-table>

    <!--客户表格数据分页-->
    <el-pagination v-if="count" background layout="total,prev, pager, next"
                   :page-size="pageSize"
                   @current-change="getData"
                   :current-page="currentPage"
                   :total="count" style="float: right;">
    </el-pagination>

    <!--新增安装单-->
    <el-dialog title="新增安装单" width="600px" @open="openAdd" @close="closeAdd" class="dialog dialogAdd"
               :visible.sync="dialogAddVisible" :close-on-click-modal='false'>
      <el-form ref="addForm" style="margin-right: 20px;" :model="addForm" :rules="addFormRules" label-position="right" label-width="100px" size="small">
        <el-form-item label="客户账号" prop="khzh">
          <el-input v-model="addForm.khzh"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="khxm">
          <el-input v-model="addForm.khxm"></el-input>
        </el-form-item>
        <el-form-item label="客户号码" prop="khhm">
          <el-input v-model="addForm.khhm"></el-input>
        </el-form-item>
        <el-form-item label="客户地址" prop="khdz">
          <el-input v-model="addForm.khdz"></el-input>
        </el-form-item>
        <el-form-item label="归属网格" prop="gswg">
          <el-cascader :options="options" v-model="addForm.gswg"></el-cascader>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="lxrxm">
          <el-input v-model="addForm.lxrxm"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="lxrdh">
          <el-input v-model="addForm.lxrdh"></el-input>
        </el-form-item>
        <el-form-item label="派单时间" prop="zxsk">
          <el-date-picker v-model="addForm.pdsj" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
            type="datetime" placeholder="选择派单时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="请输入备注" resize="none" v-model="addForm.remark">
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'WxAzd',
  data () {
    return {
      queryForm: {},    //  查询条件
      prop: 'createTime', //  排序属性
      order: -1,    //  排序 升序、降序
      tableData: [],    //  当前页数据
      query_show: false,          //  是否显示更多查询
      count: '',      //  总数据条数
      currentPage: 1,//默认开始页面
      pageSize: 20,//每页的数据条数
      currentItem: {},      //  当前要转化的微信安装单
    /************************新增安装单********************* */
      addForm: {
        khzh: '',
        khxm: '',
        khhm: '',
        khdz: '',
        gswg: [],
        pdsj: '',
        zwsfId: '',
      },                //  新增表单
      addFormRules:{
          khzh: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          khxm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          khhm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          khdz: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          gswg: [{ required: true, validator: this.isArrayNull, trigger: 'change' }]
      },//新增校验规则
      dialogAddVisible: false,    //  新增模态框
      options: [],
    }
  },
  mounted(){
    this.getData(1)
    this.getWg()
  },

  methods: {
    //  清空查询
    clearQuery(){
        this.queryForm = {}
        this.getData(1)
    },
    getData(val){
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = val
      params.pageSize = this.pageSize
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
      this.startLoading()
      this.$post("/api/WxAzdController/getWxAzds",params, (data) => {
        this.tableData = data.list;
        this.count = data.count;
      })
    },
    // 排序
    sortChange(obj){
      this.prop = obj.prop || "createTime"
      this.order = obj.order == 'ascending' ? 1 : -1
      this.getData(1)
    },
  /******************新增***************** */
    clickAdd(row){
      this.currentItem = row
      this.addForm.lxrxm = row.lxrxm
      this.addForm.lxrdh = row.lxrdh
      this.addForm.khdz = row.khdz
      this.addForm.remark = row.remark
      this.addForm.fromWhere = '微信'
      this.addForm.wxId = row.id
      this.dialogAddVisible = true
    },
    //  获取网格
    getWg(){
      let params = {}
      params.currentPage = 1
      params.queryForm = {}
      params.prop = 'name'
      params.order = 1
      this.$post("/api/WgController/getList",params, (data) => {
        let options = []
        let qyList = this.config.qyList
        qyList.map(item => {
          options.push({
            value: item,
            label: item,
            children: []
          })
        })
        data.list.map(item => {
          let index = qyList.indexOf(item.qy)
          if(index != -1){
            options[index].children.push({
              value: item.name,
              label: item.name,
            })
          }
        })
        this.options = options
      })
    },
    // 打开新增模态框
    openAdd(){
      this.addForm.pdsj = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    },
    // 关闭新增模态框
    closeAdd(){
      this.$refs.addForm.resetFields()
    },
    // 确定新增
    add(){
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let addForm = this.deepClone(this.addForm)
          console.log(addForm)
          if(addForm.gswg && addForm.gswg.length){
            addForm.qy = addForm.gswg[0]
            addForm.gswg = addForm.gswg[1]
          }else{
            addForm.qy = ''
            addForm.gswg = ''
          }
          if(addForm.zwsfId){
            addForm.zwsfCname = addForm.zwsfId.split('/')[1]
            addForm.zwsfId = addForm.zwsfId.split('/')[0]
          }
          this.startLoading()
          this.$post("/api/AzdController/addOne", addForm, (data) => {
            this.$message.success("添加成功！")
            this.currentItem.state = '已派单'
            this.dialogAddVisible = false
          })
        }
      })
    },
  
  }
}
</script>

<style lang="less" scoped>
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 400px;
    }
  }

  .label-box{
    display: flex;
    margin-bottom: 5px;
    .label-text{
      width: 100px;
      text-align: right;
      padding-right: 10px;
    }
    .label-value{
      flex: 1;
    }
  }
</style>
<style lang="less">
    .long-form .el-form-item__label{
      line-height: 16px;
    }
</style>

